diff options
Diffstat (limited to 'examples/hackernews/src/pages/users/[id].astro')
| -rw-r--r-- | examples/hackernews/src/pages/users/[id].astro | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/examples/hackernews/src/pages/users/[id].astro b/examples/hackernews/src/pages/users/[id].astro new file mode 100644 index 000000000..9b43c6958 --- /dev/null +++ b/examples/hackernews/src/pages/users/[id].astro @@ -0,0 +1,69 @@ +--- +import Show from '../../components/Show.astro'; +import Layout from '../../layouts/Layout.astro'; +import fetchAPI from '../../lib/api'; +import type { IUser } from '../../types.js'; + +const { id } = Astro.params as { id: string }; + +const user = (await fetchAPI(`user/${id}`)) as IUser; +--- + +<Layout> + <main> + <Show when={user}> + <Show when={!user.error}> + <h1 slot="fallback">User not found.</h1> + <h1>User : {user.id}</h1> + <ul class="meta"> + <li> + <span class="label">Created:</span> + {user.created} + </li> + <li> + <span class="label">Karma:</span> + {user.karma} + </li> + <Show when={user.about}> + <li set:html={user.about} class="about"></li>{' '} + </Show> + </ul> + <p> + <a href={`https://news.ycombinator.com/submitted?id=${user.id}`}>submissions</a> |{' '} + <a href={`https://news.ycombinator.com/threads?id=${user.id}`}>comments</a> + </p> + </Show> + </Show> + </main> +</Layout> + +<style> + main { + background-color: rgb(248 250 252); + box-sizing: border-box; + padding: 2em 3em; + } + + h1 { + margin: 0; + font-size: 1.5em; + } + + .meta { + list-style-type: none; + padding: 0; + } + + .label { + display: inline-block; + min-width: 4em; + } + + .about { + margin: 1em 0; + } + + p a { + text-decoration: underline; + } +</style> |